<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Hello World</title>
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <!-- <link rel="icon" type="image/png" href="assets/i/favicon.png"> -->
  <link href="//cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
  <style type="text/css">
  .search_box {
	background: #e2e4ed;
	border-bottom: 1px solid #d4d7e5;
	height: auto;
	padding: 10px 20px;
	margin-bottom: 20px;
	line-height: 31px;
	font-size: 13px;
	}
  </style>
</head>
<body>
<div class="search_box">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td width="7%" align="right">用户手机号：</td>
			<td width="10%"> <input type="text" id="txtAddress"></td>
			<td width="7%" align="right">查询时间：</td>
			<td width="35%">
				<input class="laydate-icon" id="txtStartTime" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value=""> -
				<input  class="laydate-icon" id="txtEndTime" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" value="2016-08-08 16:15:00" />
			</td>
			<td >
				<button type="button" class="am-btn am-btn-primary am-radius" onclick="searchInfo()">搜索</button>
			</td>
		</tr>
	</table>
</div>

<table class="am-table am-table-hover am-table-bordered am-table-radius am-table-striped">
    <thead>
        <tr>
            <th>用户手机号</th>
			<th>用户登录名</th>
            <th>登录ip</th>
            <th>登录时间</th>
        </tr>
    </thead>
    <tbody id="listbody">
        <!-- <tr>
            <td>Amaze UI</td>
            <td>http://amazeui.org</td>
			 <td>10.2.111.161</td>
            <td>2012-10-01</td>
        </tr> -->
             <script id="pagetmpl" type="text/x-dot-template">
			 {{ for(var i=0; i < it.length ; i++){  }}
				<tr>
					<td> {{=it[i].id}}</td>
					<td>{{=it[i].osName}}</td>
					<td>{{=it[i].description}}</span></td>
					<td>{{=it[i].broName}}</td>
				</tr>
				{{ } }}
			</script>
    </tbody>
</table>

<div class="am-cf" style="margin-right: 10px;">
    <div class="am-fr">
        <ul class="am-pagination tpl-pagination" id="log-table-page-controller">
            <li><a id="log-controller-last" onclick='goToLastPage()'>上一页</a></li>
            <li class="am-disabled"><a id="log-controller-now">1</a></li>
            <li><a id="log-controller-next" onclick="goToNextPage()">下一页</a></li>
        </ul>
    </div>
</div>

<!--在这里编写你的代码-->

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
<script src="../../static/js/date/laydate.dev.js"></script>
<script src="../../../webapp/static/js/doT.min.js"></script>
<script>
	var pageNum;
	var baseUrl="http://localhost:8080/Alpha";
	$(document).ready(function() {
		$("#txtStartTime").val(laydate.now(-1,'YYYY-MM-DD 00:00:00'));
		$("#txtEndTime").val(laydate.now(0,'YYYY-MM-DD hh:mm:00'));
		searchInfo();
	});

    function goToNextPage() {
        pageNum = parseInt(pageNum) + 1;
        $.ajax({
            type: "GET",
            url:baseUrl+ '/actionLog/findLogList?pageNum=' + pageNum + '&pageSize=15',
            dataType: 'json', //当这里指定为json的时候，获取到了数据后会自己解析的，只需要 返回值.字段名称 就能使用了
            cache: false,
            success: function (data) {
                if (data.code == 1) {
                    updateList(data);
                    pageNum = data.pageNum;
                    $("#log-controller-now").html(pageNum);
                }
            }
        });
    }

    function goToLastPage() {
        pageNum = parseInt(pageNum) - 1;
        $.ajax({
            type: "GET",
            url: baseUrl+'/actionLog/findLogList?pageNum=' + pageNum + '&pageSize=15',
            dataType: 'json', //当这里指定为json的时候，获取到了数据后会自己解析的，只需要 返回值.字段名称 就能使用了
            cache: false,
            success: function (data) {
                if (data.code == 1) {
                    updateList(data);
                    pageNum = data.pageNum;
                    $("#log-controller-now").html(pageNum);
                }
            }
        });
    }

	/**
	 * 查询交通建议列表
	 */
	function searchInfo() {
		var startTime=$("#txtStartTime").val();
		var endTime=$("#txtEndTime").val();
		//alert(startTime);
		$.ajax({
	        type: "GET",
	        url: baseUrl+'/actionLog/findLogList?pageNum=1&pageSize=15',
	        dataType: 'json', //当这里指定为json的时候，获取到了数据后会自己解析的，只需要 返回值.字段名称 就能使用了
	        cache: false,
	        success: function (data) {
	            if (data.code == 1) {
	                pagefn = doT.template($("#pagetmpl").html());   //初始化列表模板
	                updateList(data);   //更新数据
	                pageNum = data.pageNum;
	            }
	        }
	    });
	}
	
	 function updateList(data) {
	        $("#pagetmpl").empty(); //清空模板数据
	        $("#listbody").html(pagefn(data.data));   //加入数据到模板
	    }
</script>
</body>
</html>